<template>
    <div class="histogram_svg">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" :height="height" :width="width">
            <rect x="0" y="0" :width="width" :height="height" stroke="#333" stroke-width="1" fill="none"></rect>
            <text x="10" y="40" style="font-size: 18px;" >{{ title }}</text>
            <!-- <line v-for="line in lines" :key="line" x1="20" :y1="line" :x2="width - 20" :y2="line" style="stroke:#333;stroke-width:1" /> -->
            <g fill="none" stroke="#999" stroke-width="1">
                <path v-for="line in linesList" :key="line" stroke-width="1" :d="line" />
                <!-- <line v-for="line in lines" :key="line" x1="20" :y1="line" :x2="width - 20" :y2="line" /> -->
            </g>
            <g fill="#47c5b2" stroke="#47c5b2">
<!--                <rect v-for="data in showDataList" @mouseover="handleHover(data,$event)" @mouseout="handleOut(data,$event)" :key="data.name" :x="data.x" :y="data.y" width="30" :height="data.data"></rect>-->
                <rect v-for="data in showDataList" :key="data.name" :x="data.x" :y="data.y" width="30" :height="data.data"></rect>
            </g>
            <g style="font-size:12px;text-anchor:middle;">
                <text v-for="data in showDataList" :key="data.name" :x="data.x + 15" :y="data.y - 10">{{ data.amount }}</text>
            </g>
            <g style="font-size:12px;text-anchor:middle;">
                <text v-for="data in showDataList" :key="data.name" :x="data.x + 15" :y="height - 30" v-html="data.shotName"></text>
            </g>
        </svg>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
.histogram_svg {
    max-width: 100%;
    overflow-x: auto;
}
</style>
